"use client"

import type React from "react"

import Image from "next/image"
import Link from "next/link"
import { Heart } from "lucide-react"
import type { Playlist } from "@/types/playlist"
import { cn } from "@/lib/utils"

interface PlaylistCardProps {
  playlist: Playlist
  onLike?: (playlist: Playlist) => void
  className?: string
  showCreator?: boolean
  showLikeButton?: boolean
}

export function PlaylistCard({
                               playlist,
                               onLike,
                               className,
                               showCreator = false,
                               showLikeButton = false,
                             }: PlaylistCardProps) {
  const handleLike = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (onLike) {
      onLike(playlist)
    }
  }

  return (
      <Link
          href={`/playlist/${playlist.id}`}
          className={cn("group flex flex-col gap-2 rounded-md p-2 transition-colors hover:bg-muted/50", className)}
      >
        <div className="relative aspect-square overflow-hidden rounded-md">
          <Image
              src={playlist.cover || "/placeholder.svg?height=200&width=200"}
              alt={playlist.title}
              fill
              className="object-cover transition-transform group-hover:scale-105"
          />
          {showLikeButton && playlist.isLiked && (
              <button className="absolute right-2 top-2 rounded-full bg-background/80 p-1.5" onClick={handleLike}>
                <Heart size={18} className="fill-red-500 text-red-500" />
              </button>
          )}
        </div>
        <div>
          <div className="font-medium line-clamp-1">{playlist.title}</div>
          <p className="text-sm text-muted-foreground">{playlist.songCount} 首歌曲</p>
          {showCreator && <div className="text-sm text-muted-foreground line-clamp-1">{playlist.creator}</div>}
        </div>
      </Link>
  )
}

